<!DOCTYPE html>
<html>
	<head>
		<title>The 'order' DnD Mode</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/treedata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
	.webix_tree_item{
		background:white;
	}
	</style>
	<body class='webix_full_screen'>
		<div class='header_comment'>The 'order' dnd mode</div>
		<div class='sample_comment'>The sample shows how DataTree behaves in the 'order' dnd mode. The main peculiarity of the mode is that items can't be dragged out of the tree container boundaries.</div>
		
		<div id="testB" style='width:300px; height:300px'></div>
		
		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){

			treeb = new webix.ui({
				container:"testB",
				view:"tree",

				select:true,
				drag:"order",

				data: smalltreedata
			});	

		});	
	
		</script>
	</body>
</html>